<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片区域 -->
      <el-card shadow="never">
        <!-- 提示小标签 -->
        <div class="tips">说明: 目前支持的学科和关键字条件筛选</div>
        <!-- 新增按钮 -->
        <div class="add-bth">
          <el-button
            icon="el-icon-edit"
            type="success"
            @click="$router.push('new')"
            >新增试题</el-button
          >
        </div>
        <!-- 搜索区域---form表单 -->
        <search class="search"></search>
        <!-- tips信息提示 -->
        <el-alert title="消息提示的文案" type="info" show-icon> </el-alert>
        <!-- 内容表格区域 -->
        <tables class="inner" :List="List"></tables>
        <!-- 分页区域 -->
        <div class="page">
          <el-pagination
            @size-change=""
            @current-change=""
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="Pagesize"
            :total="total"
            layout="  prev, pager, next,sizes, jumper"
            background
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import search from "./companys/questions/questions-searh.vue";
import tables from "./companys/questions/questions-table.vue";
import { list } from "@/api/hmmm/questions.js";
export default {
  components: {
    search,
    tables,
  },
  data() {
    return {
      //分页组件数据
      currentPage: 1, //当前选中页
      Pagesize: 5, //每页显示数量
      total: 7, //总数

      //内容区域数据
      List: [],
    };
  },
  methods: {
    //获取内容数据列表,并生成数据
    async getquestionsList(obj) {
      const res = await list(obj);
      // console.log(res);
      this.List = res.data.items;
      this.total = res.data.counts;
      // console.log(this.List);
    },
  },
  created() {
    this.getquestionsList({ page: this.currentPage, pagesize: this.Pagesize });
  },
};
</script>

<style scoped lang="scss">
.dashboard-container {
  .el-card {
    position: relative;
    .tips {
      font-size: 12px;
      color: pink;
    }
    .add-bth {
      position: absolute;
      top: 50px;
      right: 25px;
    }
    .search {
      margin-top: 65px;
    }
    .inner {
      margin-top: 30px;
    }
    .page {
      margin-top: 15px;
      text-align: right;
    }
  }
}
</style>
